<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body id="app">
    <h3>{{1+1>3}}</h3>
<!-- 标签中,使用""来接受映射key -->

  <!-- v-html 将标签内容加载 -->
    <p v-html="dec"></p>
<!-- v-bind:代表绑定属性,可省略 -->
    <a :href="link">baidu</a>
    <input type="text"  :placeholder="value">
<!-- 有嵌套时使用{k:v}来获取值 -->
    <img :src="img_src" :style="{width:w}">


</body>

<script>

    const {createApp} = Vue;
    createApp(
        {
            data:function(){
                return{
                    header:1,
                    dec:'<h3>hello v-html</h3>',
                    link:"https://www.baidu.com",
                    img_src:"./img/1.jpg",
                    w:"300px",
                    value:"hhhhhh"
                    
                }
            }
        }
    ).mount("#app")
</script>

</html>